<template>
	<view class="comp-battle">
		<view class="map-status">
			<view class="map-name">{{player_store.current_map}}</view>
			<view class="find-time" v-if="findTime != 0">{{wait_battle_text}} [{{findTime}}] ...</view>
		</view>
		<view class="battle-area">
			<comp-player v-if="player" :player="player"></comp-player>
			<comp-monster v-if="monster" :monster="monster"></comp-monster>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import compPlayer from "@/components/comp-player/comp-player.vue"
	import compMonster from "@/components/comp-monster/comp-monster.vue"
	export default {
		components:{
			compPlayer,
			compMonster
		},
		computed : {
			...mapState(['mod_player']),
			player_store(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				player : '',
				monster : '',
				findTime : 0,
				messages : [],
				intoView : '',
				messageIndex : 0,
				wait_battle_text : '准备战斗'
			};
		},
		mounted() {;
	
			this.refreshBattle('monster');
			
			getApp().globalData['angry_value'] = 0
			
			uni.$on('refreshBattle', (e) => {
			    this.refreshBattle(e.type)
			});

			
		},
		methods: {

			refreshBattle(type = 'monster'){
				
				if(this.worker_setInterval){
					this.worker_setInterval.terminate();
				}

				this.findTime = this.$common.deep_copy(getApp().globalData['GAME_DATA']['config'].refreshBattleTime);
				
				if(type == 'monster'){
					this.wait_battle_text = '准备战斗';
					
				}else if(type == 'boss'){
					this.wait_battle_text = '准备Boss战斗'
				}
				
				
				
				
				this.worker_setInterval = new Worker('./static/worker/worker_setInterval.js');
				this.worker_setInterval.postMessage({
					interval : 1000
				})
				
				this.worker_setInterval.onmessage = (e) => {
					
					this.findTime -= 1;
					
					if(this.findTime <= 0){
						getApp().globalData['battleEnd'] = false;
						this.player = '';
						this.monster = '';
						
						this.$nextTick(() => {
							this.player = JSON.parse(JSON.stringify(this.mod_player.player));
							
							if(type == 'monster'){
								let current_map_monsters = this.$common.deep_copy(getApp().globalData['GAME_DATA']['map'].find(item => item.name == this.player.current_map).monster);
								let monster_arr = []
								for(let i=0;i<current_map_monsters.length;i++){
									
									if(!getApp().globalData['GAME_DATA']['monsters'].find(item => item.nickname == current_map_monsters[i])){
										console.warn(`未配置[${current_map_monsters[i]}]数据库`);
										continue
									}
									let monster = this.$common.deep_copy(getApp().globalData['GAME_DATA']['monsters'].find(item => item.nickname == current_map_monsters[i]));
									monster['type'] = 'monster';
									monster_arr.push(monster)
								}
								
								this.monster = this.$common.deep_copy(monster_arr[this.$common.rnd(0,monster_arr.length-1)]);
							}
							
							if(type == 'boss'){
								this.monster = this.$common.deep_copy(getApp().globalData['GAME_DATA']['boss'].find(item => item.nickname == getApp().globalData['GAME_DATA']['map'].find(item => item.name == this.player.current_map).boss));
								this.monster['type'] = 'boss'
							}
							
							getApp().globalData['target_monster'] = this.$common.deep_copy(this.monster);

							this.worker_setInterval.terminate();
						})
						
						
					}
				
				}

			}
		}
	};
</script>

<style lang="scss">
	.comp-battle{
		display: flex;
		flex-direction: column;
		.map-status{
			height:30px;
			display: flex;
			align-items: center;
			
			background-color: $game-color-2;
			border-bottom: 1px solid #000;
			.map-name{
				margin-left:10px;
			}
			.find-time{
				color:var(--color-green);
				margin-left:10px;
			}
			
		}
		.battle-area{
			height:150px;
			display: flex;
			align-items: center;
			padding:0 40px;
			justify-content: space-between;
			border-bottom: 1px solid #000;
		}

	}
</style>